<!doctype html>
<html lang="zh" xmlns:th="https://www.thymeleaf.org">
<head>
    <th:block th:include="include-front-custom :: head(${blog.title+'—Dimple的个人博客'},${blog.summary})"/>
    <th:block th:include="include-front-custom :: highlight-css"/>
    <th:block th:include="include-front-custom :: highlight-js"/>
    <link rel="stylesheet" th:href="@{/front/css/comment.css}"/>
    <link rel="stylesheet" th:href="@{/front/css/font-awesome.min.css}"/>
    
    <!-- summernote -->
    <!-- <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/> -->
    <link rel="stylesheet" th:href="@{/css/king/bootstrap.3.3.5.css}"/>
    <link rel="stylesheet" th:href="@{/ajax/libs/summernote/summernote.css}"/>
    <!-- <link rel="stylesheet" th:href="@{/ajax/libs/summernote/summernote-bs3.css}"/>
    <link rel="stylesheet" th:href="@{/ajax/libs/bootstrap-tagsinput/bootstrap-tagsinput.css}"/> -->

    <script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
    <script th:src="@{/ajax/libs/layui/layui.js}"></script>
        <!-- 遮罩层 -->
    <script th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
    
    <script th:src="@{/dimple/js/ui.js}"></script>
    <style>
        checkbox-custom{position:relative;padding:0 15px 0 25px;margin-bottom:7px;display:inline-block}.checkbox-custom input[type="checkbox"]{opacity:0;position:absolute;cursor:pointer;z-index:2;margin:-6px 0 0 0;top:50%;left:3px}.checkbox-custom label:before{content:'';position:absolute;top:50%;left:0;margin-top:-9px;width:18px;height:17px;display:inline-block;border-radius:2px;border:1px solid #bbb;background:#fff}.checkbox-custom input[type="checkbox"]:checked+label:after{position:absolute;display:inline-block;font-family:'Glyphicons Halflings';content:"\e013";top:42%;left:3px;margin-top:-5px;font-size:11px;line-height:1;width:16px;height:16px;color:#333}.checkbox-custom label{cursor:pointer;line-height:1.2;font-weight:normal;margin-bottom:0;text-align:left}
    </style>
</head>
<body class="nobg">
<th:block th:replace="include-front-custom :: header"/>
<!--内容区开始-->
<div class="container">
    <input type="hidden" id="pageId" th:value="${blog.blogId}"/>
    <!--左侧开始-->
    <section style="width: 100%;">
        <article>
            <!--导航-->
            <div class="mbnav">
                <a onclick="location.href=document.referrer;">
	            	<i class="fa fa-home"></i>&lt;&lt;返回
	            </a>
            </div>
            <!--标题-->
            <h3 class="act-title" th:text="${blog.title}"></h3>
            <div style="text-align: center;" onclick="addBookmark();">
             	<h4 class="index-title">
                    <i class="fa fa-tags"></i>
                    <span>【添加到收藏】</span>
				</h4>
            </div>
            
            <!--副标题信息-->
            <div class="post-line bg-color">
                <ul>
                    <li>
                        <a th:title="${'发表于'+#dates.format(blog.createTime,'yyyy-MM-dd')}">
                            <i class="fa fa-clock-o"></i>
                            <time th:text="${#dates.format(blog.createTime,'yyyy-MM-dd')}"></time>
                        </a>
                    </li>
                    <li>
                        <a href="/f/about.html" title="本文作者：ls2008">
                            <i class="fa fa-user"></i>[[${loginName}]]</a>
                    </li>
                    <li>
                        <a href="#Comment" th:title="${'当前共有 '+comments.size()+' 条评论，点击转到评论'}">
                            <i class="fa fa-comments-o"></i>
                            <span th:text="${'('+comments.size()+')'}"></span></a>
                    </li>
                    <li>
                        <a th:title="${'已有'+blog.click+'次浏览'}">
                            <i class="fa fa-eye"></i>
                            <span th:text="${'('+blog.click+')'}"></span>
                        </a>
                    </li>
                </ul>
            </div>
            <div align="center">
                <img style="width: 360px;height: 210px;" th:src="${blog.headerImg}">
            </div>
            <div class=" article-content bg-color">
                <div class="article-content bg-color" th:id="${blog.support==1}?'tuijian':''">
                    <!--文章正文-->
                    <div class="article-body" th:utext="${blog.content}">
                    </div>
                    <!--END 文章正文-->
                    <!--附件-->
                    <span th:if="${not #lists.isEmpty(fileList)}" class="form-btn blue-text" style="display: block;">附件：</span>
                    <div th:each="fileObj,fileStat:${fileList}" th:id="${'fileSpan_'+fileObj.id}" style="border: 2px solid #f5f5f5;height: 30px;margin-top: 5px;line-height: 2;" >
                        <a th:text="${fileObj.originalName}" th:href="${fileObj.relativePath}"></a>
                    </div>
                    <!--end附件-->
                    
                    <div style="text-align: center;"  onclick="addBookmark();">
                    	<h4 class="index-title">
                    		<i class="fa fa-tags"></i>
                    		<span>【添加到收藏】</span>
				        </h4>
                    </div>
                    
                    <!--打赏和分享-->
                    <div class="article-fx">
                        <span class="img-circle" href="javascript:void(0)" onClick="dashangToggle()">打赏</span>&nbsp;&nbsp;&nbsp;
                        <!-- <a class="fx-btn img-circle img-circle" href="javascript:;">分享</a>
                        <div class="bd-fx arc-bdfx">
                            <i class="fa fa-close fx-close"></i>
                            <ul class="bdsharebuttonbox">
                                <li><a href="javascript:void(0)" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
                                </li>
                                <li><a href="javascript:void(0)" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
                                </li>
                                <li><a href="javascript:void(0)" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
                                </li>
                                <li><a href="javascript:void(0)" class="bds_tieba" data-cmd="tieba" title="分享到百度贴吧"></a>
                                </li>
                            </ul>
                        </div> -->
                    </div>
                    <!--END 分享-->
                    <hr>
                    <!--分类和标签-->
                    <!-- <div class="article_tag">
                        <ul>
                            <li><a th:href="${'/f/category/'+blog.category.categoryId+'.html'}"
                                   th:title="${'归类：'+blog.category.categoryTitle}"
                                   th:text="${blog.category.categoryTitle}"></a>
                            </li>
                            <li th:each="tag:${blog.tags}">
                                <a class="b-tag-name" th:title="${'标签：'+tag}" th:text="${tag}">
                                </a>
                            </li>
                        </ul>
                    </div> -->
                    <!--End 分类和标签-->
                </div>
            </div>
        </article>

        <!--上一篇，下一篇-->
        <div class="shangyip bg-color">
            <span>
                <i class="fa fa-arrow-up"></i>上一篇：
                <a class='blue-text' th:if="${previousBlog!=null}" 
                	th:href="${'/bbs/'+previousBlog.createBy+'/'+previousBlog.funcId+'/'+previousBlog.blogId+'.html'}"
                    th:title='${previousBlog.title}'
                    th:text="${previousBlog.title}"></a>
                     
                <a th:if="${previousBlog==null}" class='blue-text' href="javascript:void(0)">没有了</a>
            </span>
            <span>
                <i class="fa fa-arrow-down"></i>下一篇：
                <a class='blue-text' th:if="${nextBlog!=null}" 
                	th:href="${'/bbs/'+nextBlog.createBy+'/'+nextBlog.funcId+'/'+nextBlog.blogId+'.html'}"
                    th:title='${nextBlog.title}'
                    th:text="${nextBlog.title}"></a>
                 <a th:if="${nextBlog==null}" class='blue-text' href="javascript:void(0)">没有了</a>
            </span>
        </div>
        <!--随机推荐-->
        <div class="maybe-love">
            <h4 class="index-title"><i class="fa fa-heart"></i>您还可能喜欢</h4>
            <ul>
                <li th:each="blog:${randBlogList}">
                    <a th:href="${'/f/article/'+blog.blogId+'.html'}">
                        <img
                                th:src="${blog.headerImg}" th:alt="${blog.title}"
                                th:title="${blog.title}"/>
                        <span th:text="${blog.title}"></span>
                    </a>
                </li>
            </ul>
        </div>
        <!--END 随机推荐-->
        <h3 class="form-btn blue-text">
            <a href="javascript:;">
                <i class="fa fa-edit"></i>我要留言
            </a>
        </h3>
        <!-- 通用评论开始 -->
        <div class="comment-area" th:fragment="comment" id="Comment">
            <h4 class="index-title">
                <i class="fa fa-comments-o"></i>[[${'当前共有 '+comments.size()+' 条评论'}]]
            </h4>
            <div id="Space"></div>

            <div class="commentList">
                <input type="hidden" id="replyId">
                <ul class="comment">
                    <li th:each="comment:${comments}">
                        <div class="comment-body fade-in" th:id="${'comment-'+comment.id}">
                            <div class="cheader">
                                <div class="user-img">
                                    <img class="userImage" th:src="${comment.avatar}"
                                         th:onerror="this.src='/front/images/user.png'">
                                </div>
                                <div class="user-info">
                                    <div class="nickname">
                                        <a href="javascript:void(0)" rel="external nofollow">
                                            <strong th:text="${comment.nickname}"></strong>
                                        </a>
                                        <i class="icons os-null" title="Windows 10"></i>
                                        <i class="icons browser-null" title="Chrome 76.0.3809.87"></i>
                                    </div>
                                    <div class="timer">
                                        <i class="fa fa-clock-o fa-fw"></i><span
                                            th:text="${#dates.format(comment.createTime,'yyyy-MM-dd hh:mm:ss')}"></span>
                                        <i class="fa fa-map-marker fa-fw"></i> [(${comment.location})]
                                    </div>
                                </div>
                            </div>
                            <div class="content">
                                <a th:if="${comment.parentComment != null}"
                                   th:href="${'#comment-'+comment.parentComment.id}"
                                   class="comment-quote"
                                   th:text="${'@'+comment.parentComment.nickname}"></a>
                                <div th:if="${comment.parentComment != null}"
                                     style="background-color: #f5f5f5;padding: 5px;margin: 5px;border-radius: 4px;">
                                    <i class="fa fa-quote-left"></i>
                                    <p></p>
                                    <div style="padding-left: 10px;">
                                        <p th:utext="${comment.parentComment.content}"></p>
                                    </div>
                                </div>
                                <div>
                                    <p th:utext="${comment.content}"></p>
                                </div>
                            </div>
                            <div class="sign" th:id="${'commentDiv-'+comment.id}">
                                <a href="javascript:void(0);" class="comment-up"
                                   th:onclick="good(event,[[${comment.id}]])">
                                    <i class="fa fa-thumbs-o-up"></i>赞(<span class="count"
                                                                             th:id="${'good-count-'+comment.id}"
                                                                             th:text="${comment.good}">0</span>)
                                    <i class="sepa"></i>
                                </a>
                                <a href="javascript:void(0);" class="comment-down" t
                                   th:onclick="bad(event,[[${comment.id}]])">
                                    <i class="fa fa-thumbs-o-down"></i>踩(<span class="count"
                                                                               th:id="${'bad-count-'+comment.id}"
                                                                               th:text="${comment.bad}">0</span>)
                                    <i class="sepa"></i>
                                </a>
                                <a href="javascript:void(0);" class="comment-reply" th:id="${'reply-'+comment.id}"
                                   th:onclick="reply([[${comment.id}]])"
                                   style="display: inline;">
                                    <i class="fa fa-reply"></i>回复
                                </a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 通用评论结束 -->
    </section>
    <!-- <th:block th:replace="include-front-custom :: side"/> -->
</div>
<div class="hide_box"></div>
<div class="shang_box">
    <a class="shang_close" href="javascript:void(0)" onclick="dashangToggle()" title="关闭"><img
            src="/front/images/close.jpg" alt="取消"></a>
    <img class="shang_logo" src="/front/images/logo.png" alt="King 的个人博客"/>
    <div class="shang_tit">
        <p>感谢</p>
    </div>
    <div class="shang_payimg">
        <img src="/front/images/alipay.png" alt="扫码查看" title="扫一扫">
    </div>
    <div class="shang_payselect">
        <div class="pay_item checked" data-id="alipay">
            <span class="radiobox"></span>
            <span class="pay_logo"><img src="/front/images/alipay-logo.jpg" alt="支付宝"></span>
        </div>
        <div class="pay_item" data-id="weipay">
            <span class="radiobox"></span>
            <span class="pay_logo"><img src="/front/images/wechat-logo.jpg" alt="微信"></span>
        </div>
    </div>
</div>
<!-- 手机端 -->
<div class="shang_box_wap">
    <a class="shang_close" href="javascript:void(0)" onClick="dashangToggle()" title="关闭"><img
            src="/front/images/close.jpg"
            alt="取消"/></a>
    <div class="shang_tit">
        <p>感谢您的支持，我会继续努力的!</p>
    </div>
    <div class="shang_payimg">
        <img src="/front/images/alipay.png" alt="扫码查看"
             title="扫一扫"/>
    </div>
    <div class="pay_explain">长按二维码打赏，你说多少就多少</div>
    <div class="shang_payselect">
        <div class="pay_item checked" data-id="alipay">
            <span class="radiobox"></span>
            <span class="pay_logo">
                <img src="/front/images/alipay.png" alt="支付宝"/></span>
        </div>
        <div class="pay_item" data-id="weipay">
            <span class="radiobox"></span>
            <span class="pay_logo">
                <img src="/front/images/weichat.png" alt="微信"/></span>
        </div>
    </div>
</div>

<script th:inline="javascript">
    var display = [[${blog.allowComment}]];
</script>


<th:block th:replace="include-front-custom :: footer"/>
<script th:src="@{/front/js/catNav.js}"></script>

<!-- <script th:src="@{/front/js/comment.js}"></script>
<script th:src="@{/front/plugin/simplemde/simplemde.min.js}"></script> -->

  <script th:src="@{/js/king/bootstrap.3.3.5.js}"></script>
  <script th:src="@{/ajax/libs/summernote/summernote.js}"></script>
  <script th:src="@{/front/js/comment_summernote.js?v=3}"></script>
<script>
    $(function () {
        $(".pay_item").click(function () {
            $(this).addClass('checked').siblings('.pay_item').removeClass('checked');
            var dataid = $(this).attr('data-id');
            $(".shang_payimg img").attr("src", dataid == "alipay" ? "/front/images/alipay.png" : "/front/images/weichat.png");
            $("#shang_pay_txt").text(dataid == "alipay" ? "支付宝" : "微信");
        });
    });

    function dashangToggle() {
        $(".hide_box").fadeToggle();
        var is_pc = IsPC();
        if (is_pc == true) {
            $(".shang_box").fadeToggle();
        } else {
            $(".shang_box_wap").fadeToggle();
        }
    }

    // 判断是不是手机端
    function IsPC() {
        var userAgentInfo = navigator.userAgent;
        var Agents = ["Android", "iPhone",
            "SymbianOS", "Windows Phone",
            "iPad", "iPod"];
        var flag = true;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flag = false;
                break;
            }
        }
        return flag;
    }

    $(function () {
        if (display == false) {
            $(".comment-reply").remove();
            $("#CommentEditor").remove();
            $("#Space").append("<div style='border: 1px solid #ff6700;padding-top: 30px; padding-bottom: 30px;text-align: center;font-size: 24px;'>管理员设置当前博客禁止评论</div>");
        } else {
            initCommentEditor("#Space");
        }
    });

    $(function () {
        //代码高亮自定义
        $("code").each(function () {
            $(this).html("<ul><li>" + $(this).html().replace(/\n/g, "\n</li><li>") + "\n</li></ul>");
        });
    });
    jQuery(document).ready(function ($) {
        //处理目录
        $.CateNav('.article-body', '#Catalog_box');
        $('#Catalog_box').height($('#Catalog_box').height() - 120);
        $('#toolbar-c').height($('#odl').height() / 4);
        $('#toolbar').height($('#Catalog_box').height());
        //处理固定元素
        //aside
        var $sticky = $('#Catalog_box');
        $sticky.hcSticky({
            stickTo: 'article',
            followScroll: false,
            responsive: {
                980: {
                    disable: true
                }
            }
        });
    });

    function imageError() {
        var img = event.srcElement;
        img.src = "/front/images/default_head_img.gif";
        img.onerror = null;
    }

	//添加到收藏
	function addBookmark(){
	   var hasLogin = [[${curUser!=null}]];
	   if(hasLogin){
		   $.operate.ajaxSend("/bookmarks/add", "post", "json", {"blogId": $("#pageId").val()}, function callBackFunc(result){
	           console.info(result);
	           $.modal.closeLoading();
	           if(result.code == web_status.SUCCESS){
	               $.modal.msgSuccess(result.msg);
	           }else{
	               $.modal.alertWarning(result.msg)
	           }
	       });
	   }else{
		   $.modal.msgWarning("请先登录");		   
	   }
	}
</script>
</body>
</html>